<template>
  <div class="iframe">
    <div class="i-title">
      <h3>模板引用</h3>
    </div>
    <div class="i-tip" ref="root" id="my">{{ tip2 }}</div>
    <div class="i-tip">
      {{ str }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUpdate } from 'vue'
const root = ref(null);
let str = ref("");
let tip2 = ref("今天是个好天气");
onMounted(() => {
  // DOM 元素将在初始渲染后分配给 ref
  console.log(root.value, "初始内容");
  str.value = root.value.innerHTML + " , " + root.value.id;
})
// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
  // DOM 元素将在初始渲染后分配给 ref
  console.log(root.value, "更新内容");
  str.value = root.value.innerHTML + " , " + root.value.id;
})
setTimeout(() => {
  tip2.value = "明天可能会下雨"
  root.value.className = 'red'
}, 2000)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .red{
    color:red;
  }
</style>
